<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <div style="display: flex; justify-content: center;">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button icon="barcode" type="primary" @click="generateCode" :loading="loading">生成</a-button>
      </div>
    </template>
    <a-row>
      <a-col :sm="24" :md="8" :xl="8" class="t-c">
        <img :src="qrCode" style="width: 400px;height: 400px;" alt="">
      </a-col>
    </a-row>
    <div style="width: 100%;border: 1px solid #abdcff;background-color: #f0faff;border-radius: 3px;">
      <a-row type="flex" justify="center" align="middle" style="height: 100px;width: 100%;">
        <a-col :span="3">
          <a-icon style="display: block;" type="bulb"/>
        </a-col>
        <a-col :span="21">
          <h3>提示信息：</h3>
          请使用微信扫描二维码获取openId，<span style="color: rgb(45, 140, 240);">{{deadline}}后关闭。</span>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import AgentManage from '@api/AgentManage/AgentManage'
import { getAction } from '@api/manage'
export default {
  name: 'OpenIdDialog',
  data(){
    return{
      modalWidth: 450,
      visible: false,
      url: AgentManage.userQrCode,
      qrCode: '',
      countdownSeconds: 2 * 60,
      deadline: '',
      timer: null,
      loading: false
    }
  },
  methods:{
    async showModal() {
      await this.generateCode()
      this.visible = true
      this.countdown()
    },
    close() {
      clearInterval(this.timer)
      this.timer = null
      this.visible = false
      this.$emit("refresh")
    },
    handleCancel() {
      this.close()
    },
    async generateCode() {
      this.loading = true
      const res = await getAction(this.url)
      if (res.code === 200) {
        this.qrCode = res.message
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    countdown() {
      let secondsToGo = this.countdownSeconds
      let that = this
      this.deadline = ''
      this.timer = setInterval(() => {
        secondsToGo -= 1
        let minute = Math.floor(secondsToGo / 60)
        let second = secondsToGo % 60
        that.deadline = `${minute}分${second}秒`
      }, 1000)
      setTimeout(() => {
        that.close()
      }, secondsToGo * 1000)
    }
  }
}
</script>

<style scoped>

</style>